import React, { lazy, Suspense, Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Equipment from './equipment';
import Login from '../login';
import Layout from "&components/layout"
import { connect } from "react-redux"
import Home from '../home'
const CourseGoal = lazy(() => import("../courseGoal"))
const AdminPage = lazy(() => import('../adminPage'))
const Schedule = lazy(() => import('../schedule'))
const StudentAnalysis = lazy(() => import('../studentAnalysis'))
const YearAnalysis = lazy(() => import('../yearAnalysis'))
const UserPage = lazy(() => import('../userPage'))
const ScoreCalculate = lazy(() => import('../userPage'))
const GraduationComponent = lazy(() => import('../graduation'));
// const SecondRequireComponent = lazy(() => import('../second-require'));
const ManagementStudent = lazy(() => import('../management-s'))
import SecondRequireComponent from '../second-require'
const MitrixManager = lazy(() => import("../matrix-manage"))
const TeachingProgram = lazy(() => import("../teaching-program"))


class Router extends Component {
  render() {
    const role = localStorage.getItem("role")
    
    const route = [
      <Suspense key="user" fallback={<div>loading</div>}>
        <Switch>
          <Route path='/user/courseGoal' component={CourseGoal} />
          <Route path='/user/scoreCalculate' component={ScoreCalculate} />
          <Route path='/' component={UserPage} />
        </Switch>
      </Suspense>,
      <Suspense key="admin" fallback={<div>loading</div>}>
        <Switch>
          <Route path='/admin/schedule' component={Schedule} />
          <Route path='/admin/studentAnalysis' component={StudentAnalysis} />
          <Route path='/admin/yearAnalysis' component={YearAnalysis} />
          <Route path='/admin/home' component={Home} />
          <Route path='/admin/graduation' component={GraduationComponent} />
          <Route path='/admin/seconf-graduation' component={SecondRequireComponent} />
          <Route path='/admin/mitrix-manager' component={MitrixManager}/>
          <Route path='/admin/management-student' component={ManagementStudent} />
          <Route path='/admin/teaching-program' component={TeachingProgram} />
          <Route path='/' component={AdminPage} />
        </Switch>
      </Suspense>
    ]
    return (
      <Equipment>
        <Switch>
          <Route exact path="/login" component={Login}></Route>
          <Layout role={role}>
            {route[role]}
          </Layout>
        </Switch>
      </Equipment>
    )
  }
}

const mapStateToProps = state => ({ store: state.user })
export default connect(mapStateToProps)(Router);
